<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%
    response.setHeader("Cache-Control", "no-store"); //HTTP 1.1    
    response.setHeader("Pragma", "no-cache"); //HTTP 1.0    
    response.setDateHeader("Expires", 0); //prevents caching at the proxy server    
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" />
        <script src="${applicationScope.webApp.root}/js/json2.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
        <script src="${applicationScope.webApp.root}/js/websocket.js"></script>
        <style>
            body {
                background-color: rgb(221,221,221);
            }
        </style>
        <script>
            if (!window.WebSocket) { 
                alert("WebSocket not supported by this browser!"); 
            } 
            var websocketURL = "ws://<%=request.getServerName()%>:8088/WebSocket/websocket";
            var menuId = "${param.menuId}";
            var menuName = "${param.menuName}";
            var tableName = "${param.tableName}";
            var tableOpener = "${param.opener}";
            var mode = "${param.mode}";
        </script>
    </head>
    <body id="body" onload="setupWebSocket();"> 
        <div data-role="page" id="page1" data-fullscreen="true"> 
            <div data-role="header" data-position="fixed">
                <c:if test="${requestScope.preTag == null}"><%--占位，以免只应出现右边button时，由于左边没有button内容而致使右边button出现在左边--%>
                    <a id='titleLeft' style="display:none;" href="javascript: previousTag(1);" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
                </c:if>
                <c:if test="${requestScope.preTag != null}">
                    <a id='titleLeft' href="${applicationScope.webApp.root}/mobile?command=courseList1&menuId=${requestScope.menuId}&tagId=${requestScope.preTag.id}" data-role="button" data-theme="a" data-icon="arrow-l">${requestScope.preTag.name}</a>
                </c:if>
                <h1 id="title">${requestScope.curTag.name}</h1>
                <c:if test="${requestScope.nexTag != null}">
                    <a id='titleRight' href="${applicationScope.webApp.root}/mobile?command=courseList1&menuId=${requestScope.menuId}&tagId=${requestScope.nexTag.id}" data-role="button" data-theme="a" data-icon="arrow-r">${requestScope.nexTag.name}</a>
                </c:if>
            </div>
            <div data-role="content"> 
                <div class="content-primary">	
                    <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d"> 
                        <li data-role="list-divider"><span>已点菜肴:</span></li>
                        <c:forEach items="${requestScope.courses}" var="course">
                            <li> 
                                <img style="position:absolute; top: 10px; left: 5px;" src="${applicationScope.webApp.root}/images/${course.menu.id}/${course.smallLandscape}" /> 
                                <h3 style="font-size: 30px">${course.name}</h3>
                                <div style="position:absolute; top: 26px; right: 150px; font-size: 30px"><span>￥${course.price}</span></div>
                                <div style="position:absolute; top: 19px; right: 10px;"> 
                                    <a href="callObjC://order?courseId=${course.id}" data-role="button">我  点</a> 
                                </div> 
                            </li>
                        </c:forEach>
                    </ul> 
                </div><!--/content-primary --> 
            </div><!-- /content --> 
            <%pageContext.include("../footer.jsp");%>
        </div><!-- /page -->
    </body>
</html>
